<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>手动实现对话框</title>
    <style>
        .mask{
            width:100%;
            height:100%;
            background:rgba(0,0,0,0.3);
            z-index: 998;
            position:fixed; /*关键 */
            top: 0;
            left: 0;
        }

        .mask .dialog{
            width: 300px;
            height: 300px;
            background-color: white;
            margin: auto;
            margin-top: 100px;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: #ffa700;
            /*横向偏移、纵向偏移、虚化程度、放大程度*/
            box-shadow: 0 0 12px 0 rgba(233,234,237,1);

        }
    </style>
</head>

<body>



        <div class="box">
            这是页面正常内容
        </div>

        <div class="mask">

            <div class="dialog">
                这是弹窗内容
            </div>

        </div>

</body>

</html>